<template>
	<view class="cake-item margin-bottom">
		<image :src="gdata.img" mode="" @click="handleDetail(gdata.objectId)"></image>
		<view class="flex justify-between">
			<view class="">
				<view class="">{{gdata.name}}</view>
				<view class="text-xs margin-tb-xs text-cut">{{gdata.french}}</view>
			</view>
			<view class="btn-cont" @click="showPop(gdata)">
				<text class="iconfont icon-gouwuche"></text>
			</view>
		</view>
		<view class="text-df">{{gdata.price}}</view>
	</view>
</template>

<script setup>
import {useStore} from 'vuex'
const store = useStore()
defineProps({gdata:Object})
const handleDetail = (id)=>{
	console.log(id);
	uni.navigateTo({
		url:`/pages/detail/detail?id=${id}`
	})
}
//弹窗
const showPop = (cakeObj)=>{
	store.commit('cart/popDataMut',cakeObj)
	store.commit('cart/editIdxMut',-1)
	store.commit('cart/togglePopShow',true)
}
</script>

<style lang="scss">
.cake-list{
	padding: 15upx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.cake-item{
		width: 353upx;
	}
	image{
		width: 100%;
		height: 353upx;
	}
	
}
.btn-cont{
	height: 70upx;
	width: 70upx;
	border-radius: 50%;
	text-align: center;
	line-height: 70upx;
	background-color: #FFE329;
	flex-shrink: 0;
}
.text-cut{
	width: 260upx;
}
</style>
